<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="main" style="width: 1200px;height: 600px"></div>
<script src="/layuimini-2/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/layuimini-2/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="/layuimini-2/js/lay-module/echarts/echarts.js"></script>
<script src="/layuimini-2/js/lay-module/echarts/echartsTheme.js"></script>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    var app = {};
    window.onload = function () {
        $.ajax({
            url: '/perf/echartsBar.do',
            type: "get",
            success: function (ret) {
                if (ret.code == 0) {
                    var nameArr = [];
                    var monthArr = [];
                    var yearArr = [];
                    var gradeArr = [];
                    for (let i = 0; i < ret.data.length; i++) {
                        nameArr.push(ret.data[i].name);
                        monthArr.push(ret.data[i].month);
                        yearArr.push(ret.data[i].year);
                        gradeArr.push(ret.data[i].grade);
                    }

                    const posList = [
                        'left',
                        'right',
                        'top',
                        'bottom',
                        'inside',
                        'insideTop',
                        'insideLeft',
                        'insideRight',
                        'insideBottom',
                        'insideTopLeft',
                        'insideTopRight',
                        'insideBottomLeft',
                        'insideBottomRight'
                    ];
                    app.configParameters = {
                        rotate: {
                            min: -90,
                            max: 90
                        },
                        align: {
                            options: {
                                left: 'left',
                                center: 'center',
                                right: 'right'
                            }
                        },
                        verticalAlign: {
                            options: {
                                top: 'top',
                                middle: 'middle',
                                bottom: 'bottom'
                            }
                        },
                        position: {
                            options: posList.reduce(function (map, pos) {
                                map[pos] = pos;
                                return map;
                            }, {})
                        },
                        distance: {
                            min: 0,
                            max: 100
                        }
                    };
                    app.config = {
                        rotate: 90,
                        align: 'left',
                        verticalAlign: 'middle',
                        position: 'insideBottom',
                        distance: 15,
                        onChange: function () {
                            const labelOption = {
                                rotate: app.config.rotate,
                                align: app.config.align,
                                verticalAlign: app.config.verticalAlign,
                                position: app.config.right,
                                // app.config.position,
                                distance: app.config.distance
                            };
                            myChart.setOption({
                                series: [
                                    {
                                        label: labelOption
                                    },
                                    {
                                        label: labelOption
                                    },
                                    {
                                        label: labelOption
                                    },
                                    {
                                        label: labelOption
                                    }
                                ]
                            });
                        }
                    };
                    const labelOption = {
                        show: true,
                        position: app.config.position,
                        distance: app.config.distance,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        rotate: app.config.rotate,
                        formatter: '{c}  {name|{a}}',
                        fontSize: 16,
                        rich: {
                            name: {}
                        }
                    };
                    option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['Month','Year','KPI']
                        },
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            left: 'right',
                            top: 'center',
                            feature: {
                                mark: { show: true },
                                dataView: { show: true, readOnly: false },
                                magicType: { show: true, type: ['line', 'bar', 'stack'] },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },
                        xAxis: [
                            {
                                type: 'category',
                                axisTick: { show: false },
                                data: nameArr
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: 'Month',
                                type: 'bar',
                                barGap: 0,
                                label: labelOption,
                                emphasis: {
                                    focus: 'series'
                                },
                                data: monthArr
                            },
                            {
                                name: 'Year',
                                type: 'bar',
                                label: labelOption,
                                emphasis: {
                                    focus: 'series'
                                },
                                data: yearArr
                            },
                            {
                                name: 'KPI',
                                type: 'bar',
                                label: labelOption,
                                emphasis: {
                                    focus: 'series'
                                },
                                data: gradeArr
                            },

                        ]
                    };
                    myChart.setOption(option);

                   // // 单柱状图
                   //  option = {
                   //      xAxis: {
                   //          type: 'category',
                   //          data: nameArr,
                   //          textStyle:{
                   //              color: '#F97316',
                   //              fontsize:20,
                   //
                   //          },
                   //          axisLabel: {
                   //              interval: 0,//横轴信息全部显示
                   //              rotate: 60,//60度角倾斜显示
                   //              formatter: function (val) {
                   //                  return val.split("").join("\n");
                   //              }
                   //          }
                   //          },
                   //          yAxis: {
                   //              type: 'value'
                   //          },
                   //          series: [
                   //              {
                   //                  data: monthArr,
                   //                  type: 'bar',
                   //                  showBackground: true,
                   //                  backgroundStyle: {
                   //                      color: 'rgba(180, 180, 180, 0.2)'
                   //                  }
                   //              }
                   //          ]
                   //      };
                   //      myChart.setOption(option);


                    }
                }
            })
    }


</script>
</body>
</html>